<template>
    <van-nav-bar title="讲座" left-text="返回" left-arrow @click-left="onClickLeft" />
    <h3>精选</h3>
    <div>
        <div class="cart" v-for="item in autionList">
            <p class="text">{{ item.subject }}--{{ item.title }}</p>
            <span>{{ item.data }}</span>
            <div class="left">
                <van-image :key="item.id" :src="item.image" width="50px" height="50px" />
                <span style="margin-left: 8px;">{{ item.name }}</span>
            </div>
            <div class="right">
                <div class="peplo">已有{{ item.apply }}人报名</div>
            </div>
            <van-button size="mini" @click="add(item.id)">添加</van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getAudition } from '@/api/course'
import { ref, onMounted } from 'vue';
import type { Ref } from 'vue'
import { showConfirmDialog } from 'vant'

const onClickLeft = () => history.back();

interface IAution {
    title: string,
    name: string,
    id: number,
    data: string,
    apply: string,
    image: string,
    subject: string
}
const autionList: Ref<IAution[]> = ref([])

onMounted(async () => {
    const active = ref(0);
    const { data } = await getAudition()
    console.log(data);
    autionList.value = data
    return active
})

// 删除
function add(id: string) {
    showConfirmDialog({
        title: '添加弹框',
        message:
            '确定要添加吗？',
    })
        .then(() => {
            const jizuo = autionList.value.find(item => item.id === id)
            window.localStorage.setItem('jizuo', JSON.stringify(jizuo))
        })
        .catch(() => {

        })
}
</script>

<style scoped>
h3 {
    margin-left: 12px;
}

.cart {
    border: 1px solid #ccc;
    width: 350px;
    height: 170px;
    margin: 0 auto;
    padding-left: 10px;
    position: relative;
    box-sizing: border-box;

    .text {
        font-size: 18px;
        font-weight: bold;
    }

    .left {
        position: absolute;
        bottom: 5px;
        left: 10px;
    }

    .right {
        position: absolute;
        bottom: 15px;
        right: 10px;
        text-align: right;

        .top {
            font-size: 18px;
            margin-bottom: 5px;
            color: red;
        }
    }

    button {
        width: 40px;
        height: 30px;
        font-size: 14px;
        position: absolute;
        top: 0;
        right: 0;
    }
}
</style>